<template>
    <div class="renderVessel" @dragenter="dragEnter" @drop="drop" @dragleave="dragLeave" @dragover="dragOver">
        <template v-for="(item) in componentsNameList().list" :key="item">
            <components-render :options="item"></components-render>
        </template>
    </div>
</template>
    
<script setup>
import {watch,ref, onMounted ,computed} from 'vue'
import componentsRender from './componentsRender.vue';
import { componentsNameList } from '@/store/pinia';
import formOptions from '@/views/commonComponents/drag/formOptions'
import { findSelectOption } from "@/hooks/drag/findSelectOption"
const props = defineProps(['componentsName'])
const emits = defineEmits(['dragEnter','drop','dragLeave','dragOver','mClick'])
let isLayoutCom = ''
const dragEnter = e =>{
    emits('dragEnter',e)
}
const drop = e =>{
    isLayoutCom = e.target.getAttribute('componentId')
    emits('drop',e)
}
const dragLeave = e =>{
    emits('dragLeave',e)
}
const dragOver = e =>{
    emits('dragOver',e)
}
watch(()=>props.componentsName,(nV)=>{
    if(!nV) return
    const item = formOptions.find(o=>nV === o.name)
    const newItem = JSON.parse(JSON.stringify(item))
    const length =  componentsNameList().list.length
    let obj = {}
    if(isLayoutCom && isLayoutCom.indexOf('LayoutSubfield') != -1){ //是否布局组件
        obj = findSelectOption(componentsNameList().list,isLayoutCom)
        obj.children.push({ name: nV, ...newItem, id:obj.id + '_' + nV + (obj.children.length + 1) })
    }else{
        obj = { name: nV, ...newItem, id: nV + (length + 1) }
    }
    componentsNameList().updateList(obj)
})
/* 删除所有组件后将index置空 */
watch(()=>componentsNameList().list.length,n=>{
   
})
</script>
    
<style scoped>
.renderVessel{
    height: 100%;
}

</style>